<template>
  <div class="publishArticle">
    <div class="return clearfix">
      <router-link to="/home"> 首页 </router-link>
      > {{$route.name}}
    </div>
    <form action="#" class="form-horizontal col-md-10 col-md-offset-1">
      <div class="form-group">
        <label for="" class="col-md-2 label-control">主题</label>
        <div class="col-md-10">
          <input type="text" class="form-control" v-model="art.title">
        </div>
      </div>
      <div class="form-group">
        <label for="" class="col-md-2 label-control">分类</label>
        <div class="col-md-10" id="radio-box">
          <label  class="radio-inline">
            <input type="radio" name="type" v-model="art.type" value="1">闲谈贴
          </label>
          <label class="radio-inline">
            <input type="radio" name="type" v-model="art.type" value="2">技术贴
          </label>
          <label class="radio-inline">
            <input type="radio" name="type" v-model="art.type" value="3">自述贴
          </label>
          <label class="radio-inline">
            <input type="radio" name="type" v-model="art.type" value="4">吐槽贴
          </label>
        </div>
      </div>
      <div class="form-group">
        <label for="" class="col-md-2 label-control">内容</label>
        <div class="col-md-10">
          <textarea   id="easyEdit" v-model="art.content">
          </textarea>
        </div>
      </div>
      <div class="form-group">
        <div class="col-md-10 col-md-offset-2">
          <button class="btn btn-success" @click.prevent="publishArticleBtn">
            发表
          </button>
        </div>
      </div>
    </form>
  </div>
</template>

<style>
  #radio-box .radio-inline {
    padding-top: 0;
  }
  .radio-inline input[type=radio] {
    bottom: 2px;
  }

</style>

<script>
  
  export default {
    data () {
      return {
        editor_ok: false,
        editor: null,
        art: {
          title: '',
          type: '1',
          intro: '',
          content: '',
          autor: ''
        }
      }
    },
    computed: {
      loginer () {
        return this.$store.state.userInfo && this.$store.state.userInfo.user
      }
    },
    methods: {
      publishArticleBtn () {
        //  验证用户是否登录, autor为空，就是没登录
        if (!this.loginer) {
          return window.alert('请登录')
        }
        //  插入script
        if (!this.safeTest()) {
          return window.alert('不要做一些非法行为！')
        }
        if (!this.art.title || !this.editor.$txt.text()) {
          window.alert('请填写完整')
          return
        }
        this.art.autor = this.loginer
        //  将编辑器的html文本存入content
        this.art.content = this.editor.$txt.html()
        this.art.intro = this.editor.$txt.text().slice(0, 80) + '...'
        this.$http.post(this.rootPath + '/publishArticle', this.art).then((res) => {
          //  发表完成，进入文章详情页
          var id = res.data
          this.$router.push('/article/' + id)
        })
      },
      safeTest () {
        var content = this.editor.$txt.html()
        if (/(&lt;|<)\s*script/.test(content)) {
          return false
        }
        return true
      },
      createEditor () {
        var editor = new wangEditor('easyEdit')
        editor.config.menuFixed = false
        editor.config.menus = [
          'bold',
          'underline',
          'italic',
          'strikethrough',
          'eraser',
          'forecolor',
          'bgcolor',
          'quote',
          'fontfamily',
          'fontsize',
          'head',
          '|',
          'unorderlist',
          'orderlist',
          'alignleft',
          'aligncenter',
          'alignright',
          'table',
          'emotion',
          '|',
          'link',
          'unlink',
          'location',
          'undo',
          'redo',
          'fullscreen'
        ]
        editor.create()
        this.editor = editor
        this.editor_ok = true
      }
    },
    props: ['rootPath'],
    mounted () {
      this.createEditor()
    }
  }
</script>